<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue';
import addMessage from '@/hooks/message';
import inputVue from './input.vue';
let props = defineProps({
    modelValue: {//当前页码
        // type:Number,
        required: true
    },
    maxPage: {
        type: Number,
        required: true
    }
})
let emits = defineEmits(['update:modelValue'])
let pageArr = computed(() => {
    let arr = []
    
    //当前页1
    if (props.modelValue < 4) {
        let i = 2;
        let j = 0;
        while (i < props.maxPage) {
            arr.push(i)
            i++;
            j++;
            if (j > 3) {
                break;
            }
        }
        // arr.push('...');
    } else if (props.modelValue >= 4 && props.maxPage - props.modelValue > 3) {
        // arr.push('...');

        //当前页离第一页超过3
        for (let i = -1; i < 2; i++) {
            if (props.modelValue + i < props.maxPage) {
                arr.push(props.modelValue + i)
            }
        }
        // arr.push('...');
    } else if (props.maxPage - props.modelValue <= 3) {
        for (let i = 4; i > 0; i--) {
            if (props.maxPage - i > 1) {
                arr.push(props.maxPage - i)
            }
        }
    }

    if (arr[0] > 2) {
        arr.unshift('left')
    }
    arr.unshift(1)
    if (props.maxPage - arr[arr.length - 1] > 2) {
        arr.push('right')
    }
    arr.push(props.maxPage)
    // console.log(arr);
    return arr
})


function selectPage(item, index) {
    if (typeof (item) == 'number') {
        emits('update:modelValue', item)
    } else{
        let left = props.modelValue - 5
        let right = props.modelValue + 5
        if (left < 1) {
            left = 1
        }
        if (right > props.maxPage) {
            right = props.maxPage
        }
        emits('update:modelValue', (index == 1) ? left : right);
    }
}
function beforePage() {
    if (props.modelValue == 1) {
        return
    }
    let page = props.modelValue - 1;
    if (page < 1) {
        page = 1
    }
    emits('update:modelValue', page)
}
function nextPage() {
    if (props.modelValue == props.maxPage) {
        return
    }
    let page = props.modelValue + 1
    if (page > props.maxPage) {
        page = props.maxPage
    }
    emits('update:modelValue', page)
}

//输入页码
let number = ref('')
//防抖
function confirm() {
    let num = number.value
    if (num < 1 || (num > props.maxPage)) {
        addMessage('页码不合法', 0);
        number.value = ''
        return
    } else {
        emits('update:modelValue', num)
        number.value = '';
    }
}
</script>

<template>
    <div class="paginationBody"  v-if="props.maxPage>1">
        <span>
            <i @click="beforePage" :disabled="(props.modelValue==1)">&#xe749;</i>
            <template v-for="(item, index) in pageArr" :key="index">
                <i v-if="item == 'left'" @click="selectPage(item, index)">&#xe775;</i>
                <i v-else-if="item == 'right'" @click="selectPage(item, index)">&#xe773;</i>
                <span v-else :class="item == props.modelValue ? 'selected' : ''" @click="selectPage(item, index)"
                    v-html="item">
                </span>
            </template>
            <i @click="nextPage" :disabled="props.modelValue == props.maxPage">&#xe748;</i>
        </span>
        <inputVue type="number" v-model="number" placeholder="Goto..." min="1" :max="props.maxPage"
            @enter="confirm">
            <i>&#xe7fe;</i>
        </inputVue>
    </div>
</template>

<style scoped>
.paginationBody{
    display: flex;
    align-items: flex-end;
}
.paginationBody>span {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

[disabled='true'] {
    cursor: not-allowed;
    color: rgba(0, 0, 0, 0.1);
}

.paginationBody>span>i,.paginationBody>span>span {
    user-select: none;
    width: 2em;
    vertical-align: bottom;
}

.paginationBody>span>*:not([disabled='true']) {
    cursor: pointer;
    padding: 0 .5em;
    line-height: 1;
}

i {
    color: var(--color-text-third);
}
.paginationBody>span>*:hover{
    color: var(--color-theme);
}

.selected {
    color: var(--color-theme);
    /* border:.1em solid var(--color-theme); */
}
</style>